<template>
    <div>
        <keyHeader ref="keyHeader" :data="data" :keyType="keyType"></keyHeader>
        <div class="addNewLine-btn"><el-button type="primary" @click="editDialogVisible=true;editFormParam={}">添加新行</el-button></div>
        <div class="list-body">
            <el-table :data="listTableData" border style="width: 100%" class="redisDataTable">
                <el-table-column  type="index" label="index" width="180px"></el-table-column>
                <el-table-column  label="value" show-overflow-tooltip>
                    <template slot-scope="scope">
                    {{ scope.row }}
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot="header" slot-scope="scope">
                        操作
                    </template>
                    <template slot-scope="scope">
                        <el-button type="warning" icon="el-icon-edit" circle size="small" @click="editLine(scope)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="delLine(scope)" size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="loadMore">
            <el-button :disabled="loadDoNone" @click="loadMore">{{$t('aside.loadMore')}}</el-button>
        </div>
        <editListLineDialog :editDialogVisible="editDialogVisible" :editFormParam="editFormParam"  @hideDialog="editDialogVisible=false" @saveList="editListLine"></editListLineDialog>
    </div>
</template>

<script>
import  keyHeader from './keyHeader'
import editListLineDialog from '@/components/dialog/editListLineDialog'
export default {
    components:{
        keyHeader,editListLineDialog
    },
    props:["data","keyType"],
    data(){
        return {
            pageIndex:1,
            pageSize:20,
            listTableData:[],
            loadDoNone:false,
            editDialogVisible:false,
            editFormParam:{}
        }
    },
    created(){
        this.init();
    },
    methods:{
        //初始化
        init(){
            this.refushList();
        },
        //刷新列表
        refushList(newLoad=true){
            if(newLoad){
                this.pageIndex=1;
                this.listTableData=[];
            }
            this.data.redisClient.lrange(this.data.key,((this.pageIndex-1)*this.pageSize),(this.pageSize*this.pageIndex-1)).then((res)=>{
                this.listTableData=this.listTableData.concat(res);
                (res.length<this.pageSize)&&(this.loadDoNone=true)
            }).catch((e)=>{
                this.$message.error({
                    message:e.message
                })
            })
        },
        //加载更多
        loadMore(){
            this.pageIndex+=1;
            this.refushList(false)
        },
        //删除成功
        delLine(scope){
            this.$confirm(this.$t("publicFeedback.delLineTips"),this.$t("aside.tips"),{
                confirmButtonText: this.$t('aside.determine'),
                cancelButtonText: this.$t('aside.cancel'),
                cancelButtonClass: "btn-custom-cancel",
                type: 'warning'
            }).then(()=>{
                this.data.redisClient.lrem(this.data.key,1,scope.row).then((res)=>{
                    if(res===1){
                        this.$message.success({
                            message:this.$t('publicFeedback.delSuccess')
                        })
                        this.listTableData.splice(scope.$index,1)
                    }
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }).catch(()=>{})
        },
        //编辑行弹框值传递
        editLine(scope){
            this.editDialogVisible=true;
            this.editFormParam=scope;
        },
        //修改一行数据
        editListLine(oldValue,newValue){
            this.data.redisClient.rpush(this.data.key,newValue).then((res)=>{
                if(res>0){
                    if(oldValue){
                        this.data.redisClient.lrem(this.data.key,1,oldValue.row).then((res)=>{
                            if(res===1){
                                this.$set(this.listTableData,oldValue.$index,newValue)
                            }
                        }).catch((e)=>{
                            this.$message.error({
                                message:e.message
                            })
                        })
                    }else{
                        this.listTableData.push(newValue)
                    }
                    this.$message.success({
                        message:this.$t('publicFeedback.saveSuccess')
                    })
                    if(this.data.type==="addKey"){
                        this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"add",key:this.data.key})
                        this.$eventBus.$emit("reloadKeyWindow",{client:this.data.redisClient})
                        this.$refs.keyHeader.init();
                    }
                    //隐藏窗口
                    this.editDialogVisible=false;
                }
            }).catch((e)=>{
                this.$message.error({
                    message:e.message
                })
            })
        }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        }
    }
}
</script>